import React, {PureComponent} from 'react';
import {
    StyleSheet,
    View,
    Image,
    Text,
    TouchableOpacity,
    TouchableWithoutFeedback,
    Clipboard,
    Alert
} from 'react-native';
import {appInfo} from "../../../common/config";

export default class extends PureComponent {
    //初始值
    state = {
        avatar: require('../../../images/logo.png'),
        wechatIcon: require('./img/icon_wechat.png'),
        settingsIcon: require('./img/icon_settings.png')
    };
    copy = () => {
        let {userInfo: {invite_code}} = this.props;
        Clipboard.setString(invite_code);
        Alert.alert('提示', '复制成功');
    };

    render() {
        const {avatar, wechatIcon, settingsIcon} = this.state;
        const {userInfo, isLogin, navigation} = this.props;
        let image = userInfo.avatar ? <Image source={{uri: userInfo.avatar}} style={styles.avatar}/> :
            <Image source={avatar} style={styles.avatar}/>;
        let nickname = userInfo.nickname || appInfo.name;
        return (
            <View style={styles.container}>
                <View style={styles.imgWrap}>
                    <TouchableWithoutFeedback onPress={() => {
                        navigation.navigate('customService');
                    }}>
                        <Image source={wechatIcon} style={styles.image}/>
                    </TouchableWithoutFeedback>
                    <TouchableWithoutFeedback onPress={() => {
                        navigation.navigate('settings');
                    }}>
                        <Image source={settingsIcon} style={styles.image}/>
                    </TouchableWithoutFeedback>
                </View>
                {
                    isLogin ?
                        <View style={styles.profileWrap}>
                            {image}
                            <View style={styles.textWrap}>
                                <View style={styles.firstLine}>
                                    <Text style={styles.name}>{nickname}</Text>
                                    <View style={styles.level}>
                                        <Text style={styles.levelText}>{userInfo.member_type_name}</Text>
                                    </View>
                                </View>
                                <View style={styles.secondLine}>
                                    <Text style={styles.inviteCode}>邀请码：{userInfo.invite_code}</Text>
                                    <TouchableOpacity onPress={this.copy}>
                                        <View style={styles.copyWrap}>
                                            <Text style={styles.copyText}>复制</Text>
                                        </View>
                                    </TouchableOpacity>
                                </View>
                            </View>
                        </View>
                        :
                        <View style={styles.noLogin}>
                            <Text style={styles.noLoginText}>新用户注册立即领取优惠券</Text>
                            <TouchableOpacity onPress={() => {
                                navigation.navigate('login')
                            }}>
                                <View style={styles.noLoginBtnWrap}>
                                    <Text style={styles.noLoginBtnText}>登录/注册</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        height: 172,
        paddingTop: 30,
        paddingLeft: 16,
        paddingRight: 16,
        backgroundColor: '#f84056'
    },
    imgWrap: {
        width: '100%',
        height: 20,
        flexDirection: 'row',
        justifyContent: 'flex-end'
    },
    image: {
        width: 30,
        height: 30,
        marginLeft: 8
    },
    profileWrap: {
        height: 70,
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center'
    },
    avatar: {
        width: 64,
        height: 64,
        borderRadius: 32
    },
    textWrap: {
        marginLeft: 16,
        height: 64,
        paddingTop: 16,
        marginBottom: 10
    },
    firstLine: {
        height: 20,
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
        marginBottom: 6
    },
    name: {
        fontSize: 13,
        color: '#fff'
    },
    level: {
        height: 16,
        paddingLeft: 5,
        paddingRight: 5,
        borderRadius: 10,
        marginLeft: 6,
        backgroundColor: '#fff'
    },
    levelText: {
        color: '#f84056',
        fontSize: 11,
        height: 16,
        lineHeight: 16,
        includeFontPadding: false
    },
    secondLine: {
        height: 20,
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center'
    },
    inviteCode: {
        color: '#fff',
        fontSize: 12
    },
    copyWrap: {
        height: 16,
        paddingLeft: 5,
        paddingRight: 5,
        borderRadius: 10,
        marginLeft: 6,
        borderWidth: 1,
        borderColor: '#fff'
    },
    copyText: {
        fontSize: 11,
        height: 14,
        lineHeight: 14,
        color: '#fff',
        includeFontPadding: false
    },
    noLogin: {
        height: 70,
        paddingTop: 10,
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    noLoginText: {
        fontSize: 12,
        color: '#fff'
    },
    noLoginBtnWrap: {
        paddingTop: 2,
        paddingBottom: 2,
        paddingLeft: 6,
        paddingRight: 6,
        borderRadius: 10,
        backgroundColor: '#fff'
    },
    noLoginBtnText: {
        fontSize: 14,
        height: 16,
        lineHeight: 16,
        color: '#f84056'
    }
});
